<template>
  <div class="access-in-check" id="accessInCheck">
    <createTop firstMenu="配料管理" secondMenu="配料入库" title="入库详情"></createTop>
    
    <el-button
    size="small"
    plain
    type="info"
    class="daochu-btn"
    @click="$getPdf('#accessInCheck','配料入库')">导出PDF</el-button>


    <div class="check-title">
      <div class="top">
        <div class="i"><span>入库单号: </span>{{iRes.order}}</div>
        <div class="i"><span>经办人: </span>{{iRes.do_name}}</div>
        <div class="i"><span>入库日期: </span>{{iRes.date}}</div>
        <div class="i"><span>入库类型: </span>{{iRes.state}}</div>
        <div class="i"><span>制单人: </span>{{iRes.make_username}}</div>
      </div>
      <div v-if="iRes.cg_order" class="top">
        <div class="i"><span>采购单号: </span>{{iRes.cg_order}}</div>
      </div>
    </div>
      <el-table
      :data="tableData"
      style="width: 100%"
      :border="true"
      :fit="true"
      :stripe="true"
      show-summary
      size="mini"
      align="center">

      <el-table-column
        prop="material_number"
        label="配料编号"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_name"
        label="配料名称"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_format"
        label="规格/型号"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_unit"
        label="单位"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_count"
        label="入库数量"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="remarks"
        label="备注"
        min-width="120"
        align="center">
      </el-table-column>
    </el-table>
    <div class="bottom">
      <div class="remark" v-if="iRes.remarks"><span>备注: </span>{{iRes.remarks}}</div>
      <div class="date"><span>填写时间: </span>{{iRes.created_at}}</div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import { Watch } from 'vue-property-decorator';
import tableList from '@/tables/produceInCheckTable.vue';
import AjaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    tableList
  }
})
export default class AccessInCheck extends Vue {
  listRes!: AjaxResquest;
  tableData: any[] = [];
  status: string = '';
  iRes = {};
  // 商品分类
  mounted() {
    // TODO
    this.listRes = new AjaxResquest('/materials/materialsInInfo');
    this.getList();
  }
  getList(): void {
    this.listRes.getFunction({ id: this.$route.query.id }).then((res:any) => {
      if (res.data.code === 1) {

        this.tableData = res.data.data.types.material_list;
        this.iRes = res.data.data.types.material_info;
      }
    });
  }
}
</script>
<style lang="less">
.access-in-check {
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  text-align: left;
  .el-card {
    overflow-y: auto;
  }
  .content {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .checkbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .radio {
    margin-top: 10px;
  }
  .top {
    display: flex;
    padding-left: 20px;
    margin-bottom: 10px;
    div {
      min-width: 140px;
      margin-right: 20px;
    }
    span {
      font-weight: 600;
    }
  }
  .bottom {
    // display: flex;
    padding-left: 20px;
    // margin-top: 10px;
    margin-top: 15px;
    div {
      min-width: 140px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    span {
      font-weight: 600;
    }
    .date {
      font-weight: 500;
      font-size: 14px;
      color: #777;
    }
  }
}
</style>
